<template>
  <div class="managementPage">
    <div class="managementPage_first">
      <div class="managementPage_first_left">
        <div class="title">全市药店等级占比图</div>
        <div style="height:calc(25vh)">
          <VEcharts
            ref="chartClass"
            autoresize
            :options="djConfig"
            class="chartClass"
            style="width:100%;height:100%"
          />
        </div>
      </div>
      <div class="managementPage_first_right">
        <div class="title">全市各级药店年度变化图</div>
        <div style="height:calc(25vh)">
          <VEcharts
            ref="chartClass"
            autoresize
            :options="zxConfig"
            class="chartClass"
            style="width:100%;height:100%"
          />
        </div>
      </div>
    </div>
    <div class="managementPage_second">
      <div class="title">全市各区A级药店等级分布图 </div>
      <div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="越城区" name="first" />
          <el-tab-pane label="柯桥区" name="second" />
          <el-tab-pane label="上虞区" name="third" />
          <el-tab-pane label="诸暨市" name="fourth" />
          <el-tab-pane label="嵊州市" name="fifth" />
          <el-tab-pane label="新昌县" name="six" />
        </el-tabs>
        <div style="margin-top:10px">
          <div style="height:calc(30vh)">
            <VEcharts
              ref="chartClass2"
              autoresize
              :options="dataConfig"
              class="chartClass"
              style="width:100%;height:90%"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="managementPage_second">
      <div class="title">全市各区B级药店等级分布图 </div>
      <div>
        <el-tabs v-model="activeName1" type="card">
          <el-tab-pane label="越城区" name="first" />
          <el-tab-pane label="柯桥区" name="second" />
          <el-tab-pane label="上虞区" name="third" />
          <el-tab-pane label="诸暨市" name="fourth" />
          <el-tab-pane label="嵊州市" name="fifth" />
          <el-tab-pane label="新昌县" name="six" />
        </el-tabs>
        <div style="margin-top:10px">
          <div style="height:calc(30vh)">
            <VEcharts
              ref="chartClass2"
              autoresize
              :options="dataConfig1"
              class="chartClass"
              style="width:100%;height:90%"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="managementPage_second">
      <div class="title">全市各区C级药店等级分布图 </div>
      <div>
        <el-tabs v-model="activeName2" type="card">
          <el-tab-pane label="越城区" name="first" />
          <el-tab-pane label="柯桥区" name="second" />
          <el-tab-pane label="上虞区" name="third" />
          <el-tab-pane label="诸暨市" name="fourth" />
          <el-tab-pane label="嵊州市" name="fifth" />
          <el-tab-pane label="新昌县" name="six" />
        </el-tabs>
        <div style="margin-top:10px">
          <div style="height:calc(30vh)">
            <VEcharts
              ref="chartClass2"
              autoresize
              :options="dataConfig2"
              class="chartClass"
              style="width:100%;height:90%"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="managementPage_second">
      <div class="title">全市各区D级药店等级分布图 </div>
      <div>
        <el-tabs v-model="activeName3" type="card">
          <el-tab-pane label="越城区" name="first" />
          <el-tab-pane label="柯桥区" name="second" />
          <el-tab-pane label="上虞区" name="third" />
          <el-tab-pane label="诸暨市" name="fourth" />
          <el-tab-pane label="嵊州市" name="fifth" />
          <el-tab-pane label="新昌县" name="six" />
        </el-tabs>
        <div style="margin-top:10px">
          <div style="height:calc(30vh)">
            <VEcharts
              ref="chartClass2"
              autoresize
              :options="dataConfig3"
              class="chartClass"
              style="width:100%;height:90%"
            />
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import VEcharts from '@/components/vecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface/index.js';
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      dataConfig: {
        xAxis: {
          type: 'category',
          data: ['塔山街道', '府山街道', '北海街道', '城南街道', '迪荡街道', '灵芝街道', '东湖街道', '皋埠街道', '马山街道', '东浦街道', '孙端街道', '富盛镇'],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: [100, 200, 150, 80, 70, 200, 120, 60, 40, 20, 60, 40],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              // 这里是重点
              color: function(params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d', '#f8bf6d', '#f8bf6d'];
                return colorList[params.dataIndex];
              }
            }
          }

        }]
      },
      dataConfig1: {
        xAxis: {
          type: 'category',
          data: ['塔山街道', '府山街道', '北海街道', '城南街道', '迪荡街道', '灵芝街道', '东湖街道', '皋埠街道', '马山街道', '东浦街道', '孙端街道', '富盛镇'],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: [100, 200, 150, 280, 720, 200, 120, 260, 240, 220, 620, 240],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              // 这里是重点
              color: function(params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d', '#f8bf6d', '#f8bf6d'];
                return colorList[params.dataIndex];
              }
            }
          }

        }]
      },
      dataConfig2: {
        xAxis: {
          type: 'category',
          data: ['塔山街道', '府山街道', '北海街道', '城南街道', '迪荡街道', '灵芝街道', '东湖街道', '皋埠街道', '马山街道', '东浦街道', '孙端街道', '富盛镇'],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: [100, 200, 250, 480, 120, 200, 120, 120, 240, 420, 360, 340],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              // 这里是重点
              color: function(params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d', '#f8bf6d', '#f8bf6d'];
                return colorList[params.dataIndex];
              }
            }
          }

        }]
      },
      dataConfig3: {
        xAxis: {
          type: 'category',
          data: ['塔山街道', '府山街道', '北海街道', '城南街道', '迪荡街道', '灵芝街道', '东湖街道', '皋埠街道', '马山街道', '东浦街道', '孙端街道', '富盛镇'],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        series: [{
          data: [100, 230, 550, 280, 220, 400, 620, 460, 340, 220, 160, 410],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              // 这里是重点
              color: function(params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d', '#f8bf6d', '#f8bf6d'];
                return colorList[params.dataIndex];
              }
            }
          }

        }]
      },

      nameList: [],
      activeName: 'first',
      activeName1: 'first',
      activeName2: 'first',
      activeName3: 'first',
      zxConfig: {
        legend: {
          data: ['A级药店', 'B级药店', 'C级药店', 'D级药店']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2018', '2019', '2020', '2021']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'A级药店',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134]
          },
          {
            name: 'B级药店',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234]
          },
          {
            name: 'C级药店',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154]
          },
          {
            name: 'D级药店',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334]
          }
        ]
      },
      djConfig: {
      }
    };
  },
  async created() {
    await getQueryBodyByProduce({
      cprogramname: '',
      filterList: [],
      pageIndex: 0,
      pageSize: 100,
      pageType: 1,
      tableId: 713
    }).then(res => {
      if (res.success) {
        this.nameList = [];
        res.data.map(o => {
          this.nameList.push({
            value: o.iNums,
            name: o.cQyGradeName.substring(0, 2)
          });
        });
      } else {
        this.nameList = [];
      }
    });
    this.djConfig = {
      legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: { // 图例文字的样式
          color: 'black',
          fontSize: 13
        }
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '68%',
          data: this.nameList,
          label: { // 饼图图形上的文本标签
            normal: {
              show: true,
              position: 'outer', // 标签的位置
              textStyle: {
                fontWeight: 300,
                fontSize: 12 // 文字的字体大小
              },
              formatter: '{d}%'
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

};
</script>

<style scoped lang='scss'>
    .managementPage{
      padding:10px;
      background:#fff
    }
  .managementPage_first{
    display: flex
  }
  .managementPage_first_right ,.managementPage_first_left{
    flex:1
  }
  .managementPage_second{
    margin-top:10px
  }
  .title{
    font-weight:bolder;
    font-size:15px;
    margin-bottom:15px;
  }

</style>
